<div class="yu-dashboard-container">
	<link rel="stylesheet" type="text/html" href="pages/example/dashboard/dashboard.css"/>
	<yu-row :gutter="24">
		<yu-col :span="18">
			<yu-col :span="12">
				<div class="yu-dashboard-box" style="height: 390px;">
					<div class="yu-dashboard-title">
						<h1>网格客户概览</h1>
						<a href="javascript:void(0);" @click="showDialog('gridCustomer')">更多</a>
					</div>
					<div class="yu-dashboard-content">
						<div style="height: 50px;padding: 0 10px;">
							<div style="width: 25%;height: 100%;float: left;position: relative;">
								<div style="float: left;position: absolute;top: 20%;padding: 0 0 0 10px;">
									<h1 style="color: red;font-size: 14px">{{mainData.gridNum}}</h1>
									<div>网格总数</div>
								</div>
								<div style="float:right;width: 1px;height: 25px;margin: 25px 0px; background: rgb(235,235,235);align-items: center;"></div>
							</div>
							<div style="width: 25%;height: 100%;float: left;position: relative;">
								<div style="float: left;position: absolute;top: 20%;padding: 0 0 0 10px;">
									<h1 style="color: red;font-size: 14px">{{mainData.custNum}}</h1>
									<div>客户总数</div>
								</div>
								<div style="float:right;width: 1px;height: 25px;margin: 25px 0px; background: rgb(235,235,235);align-items: center;"></div>
							</div>
							<div style="width: 25%;height: 100%;float: left;position: relative;">
								<div style="float: left;position: absolute;top: 20%;padding: 0 0 0 10px;">
									<h1 style="color: red;font-size: 14px">{{mainData.importCustNum}}</h1>
									<div>重点客户数</div>
								</div>
							</div>
							<div style="width: 25%;height: 100%;float: left;position: relative;">
								<div style="float: left;position: absolute;top: 20%;padding: 0 0 0 10px;">
									<h1 style="color: red;font-size: 14px">{{mainData.documentCustNumD}}</h1>
									<div>当日客户建档数</div>
								</div>
							</div>
						</div>
						<div class="yu-dashboard-echart-box" style="height: 240px;">
							<!-- <div id="echartOptiongl"></div> -->
							<yu-echarts :option="echartOptiongl"></yu-echarts>
						</div>
					</div>
				</div>
			</yu-col>
			<yu-col :span="12">
				<div class="yu-dashboard-box" style="height: 390px;">
					<div class="yu-dashboard-title">
						<h1>客户资产分布(万元)</h1>
						<a href="javascript:void(0);" @click="showDialog('custAssetDistr')">更多</a>
					</div>
					<div class="yu-dashboard-content">
						<div class="yu-dashboard-echart-box">
							<yu-echarts :option="echartOptionzc"></yu-echarts>
						</div>
					</div>
				</div>
			</yu-col>
			<yu-col :span="12">
				<div class="yu-dashboard-box" style="margin-bottom: 0;height: 390px;">
					<div class="yu-dashboard-title">
						<h1>红黑榜</h1>
						<!--						<a href="javascript:void(0);">更多</a>-->
					</div>
					<yu-tabs v-model="activeName" @tab-click="handleClick">
						<yu-tab-pane label="转化率" name="first">
							<el-table class="customer-no-border-table" :data="conversionRateData">
								<el-table-column label="排名" width="80">
									<template scope="scope">
										<div v-if="scope.row.rank == '1'" style="color:red;font-weight:bold;">{{scope.row.rank}}</div>
										<div v-if="scope.row.rank == '2'" style="color:green;font-weight:bold;">{{scope.row.rank}}</div>
										<div v-if="scope.row.rank == '3'" style="color:blue;font-weight:bold;">{{scope.row.rank}}</div>
										<div v-if="scope.row.rank > 3" style="font-weight:bold;">{{scope.row.rank}}</div>
									</template>
								</el-table-column>
								<el-table-column prop="userName" label="网格员" width="80"></el-table-column>
								<el-table-column prop="statisNum" label="转化率"></el-table-column>
								<el-table-column label="">
									<template slot-scope="scope">
										<yu-progress :text-inside="true" :stroke-width="18" :percentage="scope.row.statisNum"></yu-progress>
									</template>
								</el-table-column>
							</el-table>
						</yu-tab-pane>
						<yu-tab-pane label="转化数" name="second">
							<el-table class="customer-no-border-table" :data="transformationNumberData">
								<el-table-column label="排名" width="80">
									<template scope="scope">
										<div v-if="scope.row.rank == '1'" style="color:red;font-weight:bold;">{{scope.row.rank}}</div>
										<div v-if="scope.row.rank == '2'" style="color:green;font-weight:bold;">{{scope.row.rank}}</div>
										<div v-if="scope.row.rank == '3'" style="color:blue;font-weight:bold;">{{scope.row.rank}}</div>
										<div v-if="scope.row.rank > 3" style="font-weight:bold;">{{scope.row.rank}}</div>
									</template>
								</el-table-column>
								<el-table-column prop="userName" label="网格员" width="80"></el-table-column>
								<el-table-column prop="statisNum" label="转化数"></el-table-column>
							</el-table>
						</yu-tab-pane>
					</yu-tabs>
				</div>
			</yu-col>
			<yu-col :span="12">
				<div class="yu-dashboard-box" style="margin-bottom: 0;height: 390px;">
					<div class="yu-dashboard-title">
						<h1>公告栏</h1>
						<a href="javascript:void(0);" @click="showDialog('announcementManagement')">更多</a>
					</div>
					<div class="yu-dashboard-content">
						<ul class="yu-dashboard-simple-list">
							<li v-for="notice in noticeData" style="margin:20px 0px;">
								<a href="javascript:void(0);">
									<div v-if="notice.isNew== 1" style="width: 13px;margin-top: 3px; float: left;">
										<sup class="el-badge__content is-dot"></sup>
									</div>
									<span>{{notice.boardName}}</span>
									<span style="float: right;">{{notice.boardPubTime}}</span>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</yu-col>
		</yu-col>
		<yu-col :span="6">
			<div class="yu-dashboard-box" style="margin-bottom: 0;height: 805px;">
				<div class="yu-dashboard-title">
					<h1>营销提醒</h1>
					<!--					<a href="javascript:void(0);">更多</a>-->
				</div>
				<div class="yu-dashboard-content">
					<ul style="margin: 0 24px;color: dodgerblue">
						<div style="display: flex">
						<div v-if="productExpirationData.length!= 0">[7天内产品到期客户提醒]</div>
						<div v-if="productExpirationData.length!= 0" style="margin-left: 10px">{{productExpirationUndo}}条未读</div>
						</div>
						<li v-for="(item,index) in productExpirationData" style="margin:20px 0px;">
							<a href="javascript:void(0);" @click="changeType(productExpirationData,index)">
								<div v-if="item.readFlg == 0" style="width: 13px;margin-top: 3px; float: left;">
									<sup class="el-badge__content is-dot"></sup>
								</div>
								<div style="font-size: 12px;">{{item.custName+ "的"+ item.prodNmFinc + "产品要到期了，请及时处理"}} </div>
								<div style="margin: 10px 13px;color: #CCCCCC;">{{item.etlDt}}</div>

								<!-- </div> -->
							</a>
						</li>
					</ul>
					<ul style="margin: 0 24px;color: dodgerblue">
						<div style="display: flex">
							<div v-if="repaymentReminderData.length!= 0">[贷款还款提醒]</div>
							<div v-if="repaymentReminderData.length!= 0" style="margin-left: 10px">{{repaymentReminderUndo}}条未读</div>
						</div>
						<li v-for="(item,index) in repaymentReminderData" style="margin:20px 0px;">
							<a href="javascript:void(0);" @click="changeType(repaymentReminderData,index)">
								<!-- <div> -->
								<div v-if="item.readFlg == 0" style="width: 13px;margin-top: 3px; float: left;">
									<sup class="el-badge__content is-dot"></sup>
								</div>
								<div style="font-size: 12px;">{{item.custName+ "的"+ item.prodNmLoan + "贷款要还款了，请及时处理"}} </div>
								<div style="margin: 10px 13px;color: #CCCCCC;">{{item.etlDt}}</div>

								<!-- </div> -->
							</a>
						</li>
					</ul>
					<ul style="margin: 0 24px;color: dodgerblue">
						<div style="display: flex">
							<div v-if="customerBirthdayData.length!= 0">[用户生日到期提醒]</div>
							<div v-if="customerBirthdayData.length!= 0" style="margin-left: 10px">{{customerBirthdayUndo}}条未读</div>
						</div>
						<li v-for="(item,index) in customerBirthdayData" style="margin:20px 0px;">
							<a href="javascript:void(0);" @click="changeType(customerBirthdayData,index)">
								<!-- <div> -->
								<div v-if="item.readFlg == 0" style="width: 13px;margin-top: 3px; float: left;">
									<sup class="el-badge__content is-dot"></sup>
								</div>
								<div style="font-size: 12px;">{{item.custName + "客户生日要来了"}} </div>
								<div style="margin: 10px 13px;color: #CCCCCC;">{{item.etlDt}}</div>

								<!-- </div> -->
							</a>
						</li>
					</ul>
					<ul style="margin: 0 24px;color: dodgerblue">
						<div style="display: flex">
							<div v-if="overdueReminderData.length!= 0">[逾期提醒]</div>
							<div v-if="overdueReminderData.length!= 0" style="margin-left: 10px">{{overdueReminderUndo}}条未读</div>
						</div>
						<li v-for="(item,index) in overdueReminderData" style="margin:20px 0px;">
							<a href="javascript:void(0);" @click="changeType(overdueReminderData,index)">
								<!-- <div> -->
								<div v-if="item.readFlg == 0" style="width: 13px;margin-top: 3px; float: left;">
									<sup class="el-badge__content is-dot"></sup>
								</div>
								<div style="font-size: 12px;">{{item.custName + "要逾期了，请及时处理"}} </div>
								<div style="margin: 10px 13px;color: #CCCCCC;">{{item.etlDt}}</div>
							</a>
						</li>
					</ul>
					<ul style="margin: 0 24px;color: dodgerblue">
						<div style="display: flex">
							<div v-if="largeMovingAccountData.length!= 0">[大额动账]</div>
							<div v-if="largeMovingAccountData.length!= 0" style="margin-left: 10px">{{largeMovingAccountUndo}}条未读</div>
						</div>
						<li v-for="(item,index) in largeMovingAccountData" style="margin:20px 0px;">
							<a href="javascript:void(0);" @click="changeType(largeMovingAccountData,index)">
								<!-- <div> -->
								<div v-if="item.readFlg == 0" style="width: 13px;margin-top: 3px; float: left;">
									<sup class="el-badge__content is-dot"></sup>
								</div>
								<div style="font-size: 12px;">{{item.custName + (item.dbtcrFlg == 0 ? "收入" : "支出") + item.trnsAmt}} </div>
								<div style="margin: 10px 13px;color: #CCCCCC;">{{item.etlDt}}</div>
								<!-- </div> -->
							</a>
						</li>
					</ul>
					<ul style="margin: 0 24px;color: dodgerblue">
						<div style="display: flex">
							<div v-if="importantCustData.length!= 0">[重点客户]</div>
							<div v-if="importantCustData.length!= 0" style="margin-left: 10px">{{importantCustUndo}}条未读</div>
						</div>
						<li v-for="(item,index) in importantCustData" style="margin:20px 0px;">
							<a href="javascript:void(0);" @click="changeType(importantCustData,index)">
								<!-- <div> -->
								<div v-if="item.readFlg == 0" style="width: 13px;margin-top: 3px; float: left;">
									<sup class="el-badge__content is-dot"></sup>
								</div>
								<div style="font-size: 12px;">{{item.custName+ "是重点客户，请注意关注"}} </div>
								<div style="margin: 10px 13px;color: #CCCCCC;">{{item.etlDt}}</div>

								<!-- </div> -->
							</a>
						</li>
					</ul>
					<ul style="margin: 0 24px;color: dodgerblue">
						<div style="display: flex">
							<div v-if="wealthReminderData.length!= 0">[财富提醒]</div>
							<div v-if="wealthReminderData.length!= 0" style="margin-left: 10px">{{wealthReminderUndo}}条未读</div>
						</div>
						<li v-for="(item,index) in wealthReminderData" style="margin:20px 0px;">
							<a href="javascript:void(0);" @click="changeType(wealthReminderData,index)">
								<!-- <div> -->
								<div v-if="item.readFlg == 0" style="width: 13px;margin-top: 3px; float: left;">
									<sup class="el-badge__content is-dot"></sup>
								</div>
								<div style="font-size: 12px;">{{item.custName+ "的财富要到了"}} </div>
								<div style="margin: 10px 13px;color: #CCCCCC;">{{item.etlDt}}</div>

								<!-- </div> -->
							</a>
						</li>
					</ul>
					<ul style="margin: 0 24px;color: dodgerblue">
						<div style="display: flex">
							<div v-if="withdrawalInAdvanceData.length!= 0">[提前支取]</div>
							<div v-if="withdrawalInAdvanceData.length!= 0" style="margin-left: 10px">{{withdrawalInAdvanceUndo}}条未读</div>
						</div>
						<li v-for="(item,index) in withdrawalInAdvanceData" style="margin:20px 0px;">
							<a href="javascript:void(0);" @click="changeType(withdrawalInAdvanceData,index)">
								<!-- <div> -->
								<div v-if="item.readFlg == 0" style="width: 13px;margin-top: 3px; float: left;">
									<sup class="el-badge__content is-dot"></sup>
								</div>
								<div style="font-size: 12px;">{{item.custName+"的"+item.prodNmFinc+"支取了"+item.bal}} </div>
								<div style="margin: 10px 13px;color: #CCCCCC;">{{item.etlDt}}</div>
								<!-- </div> -->
							</a>
						</li>
					</ul>

				</div>
			</div>
		</yu-col>
	</yu-row>
	<!--	网格客户概览-->
	<el-dialog :center="true" title="网格客户概览" :visible.sync="gridCustomerDialogVisible"
			   position="relative">
		<yu-xtable ref="gridCustomer" :base-params="gridCustomerData" :data-url="gridCustomerDataUrl" request-type="get" row-number style="width: 100%">
			<yu-xtable-column prop="secondGridName" label="网格名称" align="center" show-overflow-tooltip></yu-xtable-column>
			<yu-xtable-column prop="custNumSum" label="网格客户数" align="center" show-overflow-tooltip></yu-xtable-column>
			<yu-xtable-column prop="custNumAdd" label="增加我行客户数" align="center" show-overflow-tooltip></yu-xtable-column>
		</yu-xtable>
	</el-dialog>
	<!--	客户资产分布-->
	<el-dialog :center="true" title="客户资产分布(万元)" :visible.sync="customerAssetsDialogVisible"
			   position="relative">
		<yu-xtable ref="gridCustomer" :base-params="customerAssetsData" :data-url="customerAssetsDataUrl" request-type="get" row-number style="width: 100%">
			<yu-xtable-column prop="secondGridName" label="网格名称" align="center" show-overflow-tooltip></yu-xtable-column>
			<yu-xtable-column prop="depBal" label="存款" align="center" show-overflow-tooltip>
				<template slot-scope="scope">
					{{scope.row.depBal|numFilter}}
				</template>
			</yu-xtable-column>
			<yu-xtable-column prop="loanBal" label="贷款" align="center" show-overflow-tooltip>
				<template slot-scope="scope">
					{{scope.row.loanBal|numFilter}}
				</template>
			</yu-xtable-column>
			<yu-xtable-column prop="fincBal" label="理财" align="center" show-overflow-tooltip>
				<template slot-scope="scope">
					{{scope.row.fincBal|numFilter}}
				</template>
			</yu-xtable-column>
			<yu-xtable-column prop="fundBal" label="基金" align="center" show-overflow-tooltip>
				<template slot-scope="scope">
					{{scope.row.fundBal|numFilter}}
				</template>
			</yu-xtable-column>
			<yu-xtable-column prop="etlDt" label="数据日期" align="center" show-overflow-tooltip></yu-xtable-column>
		</yu-xtable>
	</el-dialog>
	<!--	公告-->
	<el-dialog :center="true" title="公告管理" :visible.sync="announcementManagementDialogVisible"
			   position="relative">
		<yu-xtable ref="announcementManagement" :base-params="announcementManagementData" :data-url="announcementManagementDataUrl" request-type="get" row-number style="width: 100%">
			<yu-xtable-column prop="boardName" label="公告名称" align="center"></yu-xtable-column>
			<yu-xtable-column prop="boardLoad" label="公告下载" align="center" >
				<template slot-scope="scope">
					<a v-if="scope.row.boardLoad !==''" :href="scope.row.boardLoad+'?response-content-type=application/octet-stream'" download="scope.row.boardLoadName">点击下载</a>
				</template>
			</yu-xtable-column>
			<yu-xtable-column prop="boardPubtime" label="发布时间" align="center"></yu-xtable-column>
			<yu-xtable-column :formatter="dateFormat" prop="createTime" label="创建时间" align="center"></yu-xtable-column>
			<yu-xtable-column prop="boardContent" label="公告内容" align="center"></yu-xtable-column>
			<yu-xtable-column prop="boardStatus" data-code="ANNOUNCEMENT_STATUS" label="公告状态" align="center"></yu-xtable-column>
			<yu-xtable-column prop="boardPublisher" label="发布人" align="center"></yu-xtable-column>
		</yu-xtable>
	</el-dialog>
	<!-- 新增客户弹框-->
	<el-dialog :center="true" title="客户信息" :visible.sync="remindFormVisible" position="relative" >
		<div style="display: flex;height: auto;position: relative;transition: all .5s;flex-direction: column">
			<yu-xform disabled="true" ref="custForm"  label-width="110px" v-model="remindInfo">
				<yu-xform-group :column="2">
					<yu-xform-item label="客户名称" placeholder="客户名称" v-model="remindInfo.custName" name="custName" ctype="input">
					</yu-xform-item>
					<yu-xform-item label="重点客户" ctype="custom" name="isImport" colspan="2">
						<div style="cursor: pointer" @click="updateImport(isImport,custNo)">
							<img v-if="isImport == '1'" src="themes/common/images/isImport.png" width="18px" height="18px" />
							<img v-else="isImport == '0'" src="themes/common/images/unImport.png" width="18px" height="18px" />
						</div>
					</yu-xform-item>
				</yu-xform-group>
				<yu-xform-group :column="2">
					<yu-xform-item label="客户等级" placeholder="客户等级" data-code="CUST_LEVEL" v-model="remindInfo.custLevel" name="custLevel" ctype="select"></yu-xform-item>
					<yu-xform-item label="联系电话" placeholder="联系电话" v-model="remindInfo.telNo" name="telNo" ctype="input"></yu-xform-item>
				</yu-xform-group>
				<yu-xform-group :column="1">
				<yu-xform-item label="提醒消息" placeholder="产品名称" v-model="remindInfo.remindDetail" name="remindDetail" ctype="textarea"></yu-xform-item>
					<!--					<yu-xform-item  label="产品名称" placeholder="产品名称" v-model="remindInfo.prodNmFinc" name="prodNmFinc" ctype="input"></yu-xform-item>-->
				</yu-xform-group>
			</yu-xform>
		</div>
	</el-dialog>
</div>
